<template>
    <div class="login">
        <div class="head-top ng-scope">
            <h2>通用视频监控平台</h2>
        </div>
        <div class="login-content ng-scope">
            <div class="login-contentchild">
                <div class="login-content-left"><img src="./assets/video.png"></div>
                <div class="login-content-right">
                    <div class="login-form">
                        <login-form @on-success-valid="handleSubmit"></login-form>
                    </div>
                </div>
            </div>
        </div>
        <div class="login-footer ng-scope"></div>
    </div>
</template>

<script>
import LoginForm from '_c/login-form'
import { mapActions } from 'vuex'
import { getCityData } from '@/api/city'

export default {
  components: {
    LoginForm
  },
  methods: {
    ...mapActions([
      'handleLogin',
      'setCityData',
      'setAccessApiData',
      'setCityOriginData',
      'setLoginAccount'
    ]),
    handleSubmit ({ userName, password }) {
      this.handleLogin({ userName, password }).then(res => {
        if (res.r !== false) {
          this.getCityDataAction()
          this.setLoginAccount(userName)
          this.setAccessApiData(res.permit)
          this.$router.push({
            name: this.$config.homeName
          })
        } else {
          this.$Message.error(res.err)
        }
      })
    },
    getCityDataAction () {
      getCityData({}).then(ret => {
        let newData = ret.data.results.map((item, index) => {
          return {
            id: item.id,
            value: item.code,
            pcode: item.pcode,
            label: item.name
          }
        })
        this.setCityOriginData(newData)
        this.setCityData(this.$common.toTree(newData, 'children', 'value', 'pcode'))
      })
    }
  }
}
</script>

<style lang="less">
    .head-top {
        width: 100%;
        height: 410px;
        background: url(./assets/headback.jpg) no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .head-top h2 {
        position: absolute;
        bottom: 120px;
        right: 0px;
        left: 0px;
        color: #fff;
        text-align: center;
        font-size: 28px;
    }
    .login-content {
        width: 100%;
        position: absolute;
        top: 300px;
        right: 0px;
        left: 0px;
        z-index: 20;
        text-align: center;
    }
    .login-contentchild {
        display: inline-block;
        width: 700px;
        height: 321px;
        background-color: #fff;
        box-shadow: 0px 0px 5px #ddd;
        position: relative;
    }
    .login-content-left {
        width: 331px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .login-content-right {
        width: 369px;
        height: 100%;
        position: absolute;
        top: 0px;
        right: 0px;
    }
    .login-content-right form {
        padding-top: 35px;
        font-size: 18px;
    }
    .form-list {
        margin-bottom: 30px;
        text-align: left;
        position: relative;
    }
    .form-list label {
        display: inline-block;
        font-size: 18px;
        width: 60px;
    }
    .text-input {
        height: 36px;
        width: 252px;
        text-indent: 5px;
        border: 1px solid #ddd;
        font-size: 16px;
    }
    .text-input.code {
        width: 137px;
    }
    .blue-btn {
        width: 326px;
        height: 40px;
        background-color: #087ef4;
        color: #fff;
        border: none;
        font-size: 18px;
        letter-spacing: 10px;
    }
    .login-footer {
        width: 100%;
        height: 230px;
        position: absolute;
        bottom: 0px;
        right: 0px;
        left: 0px;
        background: url(./assets/footer.jpg) no-repeat;
        background-size: 100% 100%;
        background-position: center;
    }
    .login-form{
        padding: 20px;
    }
</style>
